<!--  -->
<template>
	<!-- grid-list-box -->
	<u-grid :col="3" class="grid-list-box" :border="false">
		<u-grid-item class="u-skeleton-fillet" :key="item" v-for="item in 3" bg-color="#151e3d"
			:custom-style="customStyle">
			<view class="list-title grid-text"> BTC/USDT </view>
			<view class="list-price">11501.09</view>
			<view class="list-increase">-0.63%</view>
			<view class="list-cny grid-text">≈81302.58 CNY</view>
		</u-grid-item>
	</u-grid>
</template>

<script>
	export default {
		data() {
			return {
				false: false,
				customStyle: {
					border: "1px solid red"
				}
			};
		},

		components: {},

		computed: {},

		mounted() {},

		methods: {},
	};
</script>
<style lang='scss' scoped>
	.grid-list-box {
		.list-title {
			color: #fff;
			font-weight: bold;
			font-size: 24upx;
		}

		.list-price {
			color: #fa3534;
			font-weight: bold;
			font-size: 34upx;
			padding: 10upx 0;
		}

		.list-increase {
			color: #fa3534;
			font-size: 24upx;
			font-weight: bold;
		}

		.list-cny {
			color: #909399;
			font-size: 24upx;
			font-weight: bold;
		}

		.u-grid-item>.u-grid-item-box {
			padding-top: 0 !important;
		}
	}
</style>
